/*
 * @Author: your name
 * @Date: 2021-12-27 20:48:33
 * @LastEditTime: 2021-12-28 10:15:18
 * @LastEditors: LAPTOP-L472H14P
 * @Description: 实现基本拖拽 将左边区域的数据拖拽至右边的区域
 * @FilePath: \react-dnd-demo\src\Components\demo\index.js
 */
import React, { Component } from 'react'
import { DragDropContextProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import DropSource from './DropSource'
import DropTargetElement from './DropTarget'

/*
 * 使用provider包裹拖拽元素以及拖拽目标区域
 * 
 */
export default class Demo extends Component {
  render() {
    return (
      <DragDropContextProvider backend={HTML5Backend}>
        <div style={{ display: 'flex' }}>
          <DropSource />
          <DropTargetElement />
        </div>
      </DragDropContextProvider>
    )
  }
}
